<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="CampusOcerviewDiv">
    <!-- 头部组件 -->
    
    <CampusOverviewBoxCom>
      <!-- 左侧部分 -->
      <CampusOverviewLeft>
        <div id="letfTop">
          <LeftTop_topCom>
            <span>近年来毕业人员去向......</span>
          </LeftTop_topCom>
          <div id="letfTop_bottom">
            <!-- 图表 -->
            <div style="height: 10px;width: 100%;">
              <div style="display: flex;justify-content: space-between;">
                <div style="display: flex;flex-direction: column;">
                  <text style="color: rebeccapurple;">6000人</text>
                  <img src="../../../img/10_03.jpg" alt="">
                  <text>2022</text>
                </div>
                <div style="display: flex;flex-direction: column;">
                  <text  style="color: cornflowerblue;">6000人</text>
                  <img src="../../../img/10_05.jpg" alt="">
                  <text>2021</text>
                </div>
                <div style="display: flex;flex-direction: column;">
                  <text style="color: yellow;">6000人</text>
                  <img src="../../../img/10_07.jpg" alt="">
                  <text>2020</text>
                </div>
              </div>
            </div>
           <div>
            <Ehcart3/>
           </div>
         
          </div>
        </div>
        <div id="leftBottom">
          <LeftTop_topCom>
            <span>毕业生工作状态 ......</span>
          </LeftTop_topCom>
          <div id="leftBottom_bottom">
            <!-- Ehcart图表 -->
          <Ehcart4/>
          </div>
        </div>
      </CampusOverviewLeft>



      <!-- 中间部分 -->
      <CampusOverviewContentCom> 
       
         <MapCom2></MapCom2>  
        <SwiperTable/>
        
      </CampusOverviewContentCom>
      <!-- 右侧部分 -->
      <CampusOverviewRight>
        <div id="rightTop">
          <RightTop_topCom>
            <span>毕业生流向城市 .....</span>
          </RightTop_topCom>

          <div id="rightTop_bottom" style="display: flex; justify-content: space-around">

            <el-tag
          
            style="width: 1.5rem;height: .8rem;font-size: .3rem; background: purple; border: 1px solid purple;"
            type="light"
            effect="dark"
          >
            设计
          </el-tag>
           <el-tag
          
            style="width: 1.5rem;height: .8rem;font-size: .3rem; background: purple; border: 1px solid purple;"
            type="primary"
            effect="dark"
          >
            设计
          </el-tag>
           <el-tag
          
            style="width: 1.5rem;height: .8rem;font-size: .3rem; background: purple; border: 1px solid purple;"
            type="primary"
            effect="dark"
          >
            设计
          </el-tag>
          </div>
        </div>
        <div id="rightBottom">
          <RightTop_topCom>
            <span>校园人员流动情况 .....</span>
          </RightTop_topCom>

          <div id="rightBottom_bottom">
              <div style="display: flex;flex-direction: column;">
              <div style="display: flex;justify-content: space-between" >
                <div style="width: 3rem;height: 0.5rem;display: flex;align-content:center ;justify-content: space-between;">
                  <img src="../../../img/icon/紫人.jpg" alt="">
                  <div style="display: flex;flex-direction: column;">
                    <text>1</text>
                    <text>昨日来访客</text>
                  </div>

                </div>
                 <div style="width: 3rem;height: 0.5rem;display: flex;align-content:center ;justify-content: space-between;">
                  <img src="../../../img/icon/绿人.jpg" alt="">
                  <div style="display: flex;flex-direction: column;">
                    <text>1</text>
                    <text>今日来访客</text>
                  </div>

                </div>
              </div>
              <div>
                <Ehcart2/>
              </div>
            </div>
          </div>
        </div>
      </CampusOverviewRight>
    </CampusOverviewBoxCom>
    <CampusOvuerviewBottomCom>
    
    </CampusOvuerviewBottomCom>
  </div>
</template>
<script lang="ts" setup>
import CampusOverviewBoxCom from '../../components/CampusOverviewBoxCom/index.vue'
import CampusOverviewContentCom from '../../components/CamppusOverviewContentCom/index.vue'
import CampusOvuerviewBottomCom from '../../components/CampusOvuerviewBottomCom/index.vue'
import LeftTop_topCom from '../../components/LetfTop_topCom/index.vue'
import RightTop_topCom from '../../components/RightTop_topCom/index.vue'
import CampusOverviewRabbar from '../../components/CampusOverviewRabbar/index.vue'
import CampusOverviewLeft from '../../components/CampusOverviewLeft/index.vue'
import CampusOverviewRight from '../../components/CampusOverviewRight/index.vue'
import Ehcart3 from '../../components/Ehcart3/index.vue'
import Ehcart4 from '../../components/Ehcart4/index.vue'
import Ehcart from '../../components/Ehcart/index.vue'
import Ehcart2 from '../../components/Ehcart2/index.vue'
import animationCom1  from '../../components/animationCom1/index.vue'
import TopCom from '../../components/CampusOverviewTopCom/index.vue'
import MapCom2 from '../../components/MapCom2/index.vue'
import { onMounted } from 'vue'
import SwiperTable from '../../components/SwiperTable/index.vue'

const location = window.location.href
console.log(location)
</script>
<style scoped >
#CampusOcerviewDiv {
  background-image: url(../../../img/pageBg.png);
  background-repeat: no-repeat; /* 防止图像重复 */
  background-size: 100% 100%; /* 图像覆盖整个元素 */
}

#letfTop,
#rightTop {
  width: 80%;
  height: 50%;
  /* margin-top: 12%; */
  overflow: hidden;
}
#rightTop {
  margin-left: 10%;
}

#leftBottom,
#rightBottom {
  width: 80%;
  height: 50%;
  margin-bottom: 10%;
  
}

#rightBottom {
  margin-left: 10%;
}

#rightTop_bottom{
  width: 100%;
  height: 30vh;
}

#rightTop_bottom,
#rightBottom_bottom {
  background-color: rgb(12, 29, 95);
  
}

</style>

